<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>site</title>

        <style type="text/css">

            .candidate-container {  margin: 0px auto ; width: 96% ; height: auto;  overflow: hidden; box-shadow: 0px 0px 1px 1px #dedede ;}
            .name-container {  height: 40px ;line-height: 40px ; font-size: 18px ; box-shadow: 0px 0px 1px 1px #dedede inset; }
            .content-align-center {  text-align: center ; }

            .site-container { margin: 50px auto 0px auto ; width: 96% ; box-shadow: 0px 0px 1px 1px #dedede; }

            * { padding: 0px 0px; margin: 0px 0px; }
            body { font-size: 14px; font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif; }
            .auto-height { height: auto; overflow: hidden; }
            .clear { clear: both ; }
            .line { height: 0px; border-bottom: 1px solid #d3d3d3;  margin: 0px auto; }
            .row { width: 100%;  height: auto; overflow: hidden; }
            .cell-1, .cell-2, .cell-3, .cell-4, .cell-5, .cell-6, .cell-7, .cell-8, .cell-9, .cell-10, .cell-11, .cell-12 {  float: left;  }
            .cell-1 {  width: 8.3333333333%; }
            .cell-2 { width: 16.6666666667%;   }
            .cell-3 { width: 25%;  }
            .cell-4 { width: 33.3333333333%; }
            .cell-5 { width: 41.6666666667%; }
            .cell-6 { width: 50%; }
            .cell-7 {  width: 58.3333333333%; }
            .cell-8 { width: 66.6666666667%; }
            .cell-9 { width: 75%; }
            .cell-10 { width: 83.3333333333%; }
            .cell-11 { width: 91.6666666667%; }
            .cell-12 { width: 100%;  }
            .offset-1 { margin-left: 8.3333333333%; }
            .offset-2 { margin-left: 16.6666666667%;  }
            .offset-3 { margin-left: 25%;  }
            .offset-4 {  margin-left: 33.3333333333%; }
            .offset-5 { margin-left: 41.6666666667%; }
            .offset-6 { margin-left: 50%; }
            .offset-7 { margin-left: 58.3333333333%; }
            .offset-8 { margin-left: 66.6666666667%;  }
            .offset-9 {  margin-left: 75%; }
            .offset-10 { margin-left: 83.3333333333%; }
            .offset-11 { margin-left: 91.6666666667%; }
        </style>

    </head>
    <body>

    <div class="site-container auto-height" ></div>

    <div style="width: 96%;padding: 20px 0px;text-align: center">
        <button type="button" id="distribution">开始分配</button>
    </div>

    <div class="candidate-container auto-height"></div>

    <script type="text/javascript">
        (function(){
            // 这里 存放要分发的数据。
            const names = [
                                
                            ];

            var candidateContainer = document.querySelector(".candidate-container");

            var fill = function () {
                for (var i = 1, n = names.length; i <= n; i++) {
                    var span = document.createElement("span");
                    span.innerHTML = names[i - 1];
                    span.classList.add("cell-1");
                    span.classList.add("content-align-center");
                    span.classList.add("name-container");
                    candidateContainer.appendChild(span);
                    if (i % 12 == 0) {
                        var line = document.createElement("div");
                        line.classList.add("line");
                        line.classList.add("clear");
                        candidateContainer.appendChild(line);
                    }
                }
            }

            var refreshCandidate = function() {
                var candidate = candidateContainer.getElementsByTagName( "span" );
                for( var i in candidate ) {
                    var span = candidate[ i ] ;
                    var name = span.innerHTML;
                    var notExists = true ;
                    for( var x in names ){
                        var n = names[ x ];
                        if( name == n ) {
                            notExists = false ;
                            break ;
                        }
                    }
                    if( notExists ) {
                        span.innerHTML = "" ;
                    }
                }
            }

            var r = 1 ;
            var c = 1 ;
            const columns = 7 ;
            var json = "" ;

            var extract = function() {
                if( names.length != 0 ) {
                    var rand = Math.random() * names.length;
                    rand = Math.floor(rand);
                    var name = names[rand];
                    if( json.length == 0 ) {
                        json = "{" + r + "" + c + ":\"" + name + "\"";
                    } else {
                        json = json.substring( 0 , json.length - 1 );
                        json = json + "," + r + "" + c + ":\"" + name + "\"}";
                    }
                    names.splice(rand, 1);

                    var nc = document.querySelector( "#name" + r + c );
                    nc.innerHTML = name ;

                    refreshCandidate();

                    if ( c == columns ) {
                        c = 0;
                        r++;
                    }
                    c++;
                    //console.log(json);
                    setTimeout(extract, 200);
                } else {
                    var distribution = document.querySelector( "#distribution" );
                    var parent = distribution.parentNode;
                    parent.removeChild( distribution );
                    var div = document.querySelector( ".candidate-container" );
                    parent.parentNode.removeChild( div );
                }
            }

            var initSite = function() {
                var sc = document.querySelector( ".site-container" );
                var left = document.createElement( "div" );
                left.classList.add( "left" );
                left.style.float = "left" ;
                left.style.width = "49%";
                //left.style.borderRight = "1px solid #dedede" ;
                var right = document.createElement( "div" );
                right.classList.add( "right" );
                right.style.float = "right" ;
                right.style.width = "49%";
                //right.style.borderLeft = "1px solid #dedede" ;

                for( var i = 1 ; i <= 7 ; i++ ) {
                    for( var j = 1, n = columns / 2 ; j <= n  ; j++ ){
                        var span = document.createElement( "span" );
                        span.classList.add("cell-4");
                        span.classList.add("content-align-center");
                        span.classList.add("name-container");
                        span.id = "name" + i + j ;
                        left.appendChild( span );
                    }
                    for( var j = 4, n = columns; j <= n ; j++ ){
                        var span = document.createElement( "span" );
                        span.classList.add("cell-3");
                        span.classList.add("content-align-center");
                        span.classList.add("name-container");
                        span.id = "name" + i + j ;
                        right.appendChild( span );
                    }
                }

                sc.appendChild(left);
                sc.appendChild( right );

            }

            initSite();

            fill(); // 填充 candidate 列表

            var distribution = document.querySelector( "#distribution" );
            distribution.onclick = function(){
                extract();
                var distribution = document.querySelector( "#distribution" );
                distribution.disabled = true ;
            }

        })();
    </script>
    </body>
</html>
